<template>
	<view>
		<view class="wrap-top-header">
			<view class="wrap-search">
				<view class="search-bg flex align-center">
					<image class="search-icon" :src="$staticImagePath('common/search.png')" />

					<input class="input f-26" placeholder="搜索关键词" placeholder-class="place" v-model="keyword"
						confirm-type="search" @confirm="onRefresh" />
				</view>
			</view>

			<view class="wrap-screen flex">
				<picker mode="multiSelector" :range="cateList" range-key="name" @columnchange="onColumnChange"
					@change="onCateChange">
					<view class="screen-item flex align-center just-center">
						<view class="name f-26 limit-num-line" :class="cate_name !== '' ? 'active' : ''">
							{{ cate_name === "" ? "全部分类" : cate_name }}
						</view>

						<image class="arrow" v-if="cate_name === ''"
							:src="$staticImagePath('common/arrow_down_black.png')" />
						<image class="arrow" v-else :src="$staticImagePath('common/arrow_up_black.png')" />
					</view>
				</picker>

				<picker mode="selector" :range="statusList" range-key="title" @change="onStatusChange">
					<view class="screen-item flex align-center just-center">
						<view class="name f-26 limit-num-line" :class="status_text !== '' ? 'active' : ''">
							{{ status_text === "" ? "上架状态" : status_text }}
						</view>

						<image class="arrow" v-if="status_text === ''"
							:src="$staticImagePath('common/arrow_down_black.png')" />
						<image class="arrow" v-else :src="$staticImagePath('common/arrow_up_black.png')" />
					</view>
				</picker>
			</view>
		</view>

		<view class="wrap safe-area">
			<view class="manager-bg flex align-center just-end f-28" v-if="isEdit" @click.stop="isEdit = false">
				退出批量管理
			</view>

			<view class="wrap-list" v-if="list.length > 0">
				<block v-for="(item, index) in list" :key="index">
					<view class="item ">
						<view class="item-top flex align-center">
							<block v-if="isEdit">
								<image class="radio-icon" :src="$staticImagePath('common/choose_select.png')"
									v-if="item.select" @click="changeSelect(item,1)"></image>
								<image class="radio-icon" :src="$staticImagePath('common/choose_normal.png')" v-else
									@click="changeSelect(item,2)"></image>
							</block>
							<image class="item-img" :src="$getImageURL(item.image)"></image>
							<view class="item-top-content flex-1">
								<view class="item-title">{{item.title}}</view>
								<view class="flex align-center item-data">
									<view>销量{{item.sales}}</view>
									<view>库存{{item.stock}}</view>
								</view>
								<view class="item-price">¥{{item.price}}</view>
							</view>
						</view>
						<view class="item-tool flex align-center just-between" v-if="!isEdit">
							<view class="flex align-center" @click="delGoods(item,index)">
								<image class="del-img" :src="$staticImagePath('/common/delete2.png')"></image>
								删除
							</view>
							<view class="flex align-center">
								<view class="edit item-tool-btn" @click="edit(item)">编辑</view>
								<view class="status item-tool-btn" @click="editGoods(item)"
									v-if="item.status == 'normal'">
									下架
								</view>
								<view class="item-tool-btn normal" @click="editGoods(item)" v-else>立即上架</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<wanl-empty v-if="list.length === 0" src="ticket_default3x" text="暂无商品" />
		</view>

		<view class="wrap-footer">
			<view v-if="isEdit" class="edit-footer safe-area">
				<view class="edit-bottom flex align-center just-between">
					<view class="left flex align-center">
						<view class="choose" @click.stop="onAllChoose">
							<image v-if="isAllChoose" :src="$staticImagePath('common/choose_select.png')" />

							<image v-else :src="$staticImagePath('common/choose_normal.png')" />
						</view>

						<view class="title f-28">全选</view>
					</view>

					<view class="right flex align-center">
						<view class="down btn f-32" @click.stop="onAllDown">下架</view>

						<view class="delete-btn btn f-32" @click.stop="onAllDelete">删除</view>
					</view>
				</view>
			</view>

			<view v-else class="manage-footer safe-area">
				<view class="manage-bottom flex align-center just-between">
					<view class="manager-btn f-30" @click.stop="isEdit = true">批量管理</view>

					<view class="add-btn f-34" @click.stop="$jump.to('/pages/business/goods/add')">
						新增商品+
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ShopGoodsList,
		GetShopGoodsCategory,
		delGoods,
		EditGoodsStatus
	} from "@/API/store.js";
	export default {
		data() {
			return {
				isEdit: false, // 是否编辑状态
				isAllChoose: false, // 是否全选

				statusList: [{
						title: "全部",
						id: "0"
					},
					{
						title: "上架",
						id: "1"
					},
					{
						title: "下架",
						id: "2"
					},
				], //商品状态
				
				cateList: [], //分类列表

				cate_id: "", //分类id
				cate_name: "", //分类名称
				keyword: "", //搜索关键字
				status: "0", //商品状态
				status_text: "", //商品状态文字
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad() {
			this.getCategoryList();
		},
		onShow() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getData()
			}
		},
		methods: {
			/**
			 * 每列选择
			 */
			onColumnChange(e) {
				const column = e.detail.column;
				const row = e.detail.value;

				const first = this.cateList[0];

				switch (column) {
					case 0: //改变一级分类
						const second = this.cateList[0][row].children;
						const three = second.length > 0 ? second[0].children : [];

						this.$set(this.cateList, 1, this.cateList[0][row].children);
						this.$set(this.cateList, 2, three);

						break;
					case 1: //改变二级分类
						this.$set(this.cateList, 2, this.cateList[1][row].children);
						break;
				}
			},
			onCateChange(e) {
				const firstIdx = e.detail.value[0];
				const secondIdx = e.detail.value[1];
				const thirdIdx = e.detail.value[2];

				const first = this.cateList[0];
				const second = this.cateList[1];
				const third = this.cateList[2];

				const first_id = first[firstIdx].id;
				const first_name = first[firstIdx].name;

				if (second.length === 0) {
					this.cate_id = first_id;
					this.cate_name = first_name;
					this.onRefresh();
				} else {
					const second_id = second[secondIdx].id;
					const second_name = second[secondIdx].name;

					if (third.length === 0) {
						this.cate_id = second_id;
						this.cate_name = second_name;
						this.onRefresh();
					} else {
						this.cate_id = third[thirdIdx].id;
						this.cate_name = third[thirdIdx].name;
						this.onRefresh();
					}
				}
			},
			/**
			 * 状态筛选
			 */
			onStatusChange(e) {
				const index = e.detail.value;
				this.status = this.statusList[index].id;
				this.status_text = this.statusList[index].title;

				this.onRefresh();
			},
			/**
			 * 全选
			 */
			onAllChoose() {
				let bool = this.isAllChoose
				this.list.forEach(item => {
					item.select = !bool
				})
				this.isAllChoose = !bool
				this.$forceUpdate()
			},
			/**
			 * 下架
			 */
			onAllDown() {
				uni.showModal({
					title: '确认要下架这些商品吗？',
					success: res => {
						if (res.confirm) {
							let ids = this.list.filter(v => v.select == true).map(v => v.id).join(',')
							EditGoodsStatus({
								ids,
								type: 2
							}).then(res => {
								this.getData()
							})
						}
					}

				})
			},
			/**
			 * 删除
			 */
			onAllDelete() {
				uni.showModal({
					title: '确认要删除这些商品吗？',
					success: res => {
						if (res.confirm) {
							let ids = this.list.filter(v => v.select == true).map(v => v.id).join(',')
							delGoods({
								ids
							}).then(res => {
								this.getData()
							})
						}
					}
				})
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				ShopGoodsList({
					page: this.page,
					keyword: this.keyword,
					status: this.status,
					cate_id: this.cate_id,
				}).then((res) => {
					const list = res.data.data;
					if (this.page === 1) {
						this.total = res.data.total;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},

			/**
			 * 获取分类
			 */
			getCategoryList() {
				GetShopGoodsCategory().then((res) => {
					const first = res.data;
					const second = first[0].children;
					const three = second.length > 0 ? second[0].children : [];

					this.cateList = [first, second, three];
				});
			},

			/**
			 * 删除商品
			 */
			delGoods(item, index) {
				uni.showModal({
					title: '确定要删除这件商品吗？',
					success: res => {
						if (res.confirm) {
							delGoods({
								ids: item.id
							}).then(res => {
								this.list.splice(index, 1)
							})
						}
					}
				})
			},

			/**
			 * 修改商品
			 * @param {Object} item
			 */
			edit(item) {
				this.$jump.to('/pages/business/goods/add?id=' + item.id)
			},

			/**
			 * 修改上下架状态
			 */
			editGoods(item) {
				const edit = item => {
					EditGoodsStatus({
						ids: item.id,
						type: item.status == 'hidden' ? 1 : 2
					}).then(res => {
						item.status = item.status == 'hidden' ? 'normal' : 'hidden'
					})
				}

				if (item.status == 'normal') {
					uni.showModal({
						title: '确认下架这件商品吗？',
						success: res => {
							if (res.confirm) {
								edit(item)
							}
						}
					})
				} else {
					edit(item)
				}
			},

			/**
			 * 修改管理状态下选中状态
			 * @param {Object} item
			 */
			changeSelect(item) {
				if (item.select == undefined) item.select = false
				item.select = !item.select
				this.$forceUpdate()

				let num = 0
				this.list.forEach(item => {
					if (item.select == true) {
						num++
					}
				})

				this.isAllChoose = num == this.list.length
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top-header {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		background-color: white;
		z-index: 99;

		.wrap-search {
			width: 100%;
			padding: 5rpx 25rpx;
			box-sizing: border-box;
			overflow: hidden;

			.search-bg {
				width: 100%;
				height: 62rpx;
				border-radius: 31rpx;
				overflow: hidden;
				background-color: #f6f6f6;
				padding: 0 25rpx;
				box-sizing: border-box;
				gap: 13rpx;

				.search-icon {
					width: 30rpx;
					height: 30rpx;
				}

				.input {
					flex: 1;
					overflow: hidden;
					color: #333333;
				}

				/deep/ .place {
					color: #bbbbbb;
				}
			}
		}

		.wrap-screen {
			width: 100%;
			overflow: hidden;

			.screen-item {
				width: 375rpx;
				height: 80rpx;
				overflow: hidden;
				gap: 10rpx;
				padding: 0 10rpx;

				.name {
					color: #333333;
					--limit-num: 1;
				}

				.active {
					color: $theme-color;
				}

				.arrow {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	.wrap {
		--bottom-height: 150rpx;
		padding: 25rpx;
		box-sizing: border-box;

		.manager-bg {
			width: 100%;
			overflow: hidden;
			color: #888888;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-bottom: 25rpx;
		}

		.wrap-list {
			width: 100%;
			overflow: hidden;
			padding-bottom: 170rpx;

			.item {
				width: 100%;
				background-color: white;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				padding: 20rpx;

				&-top {
					.item-img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 20rpx;
					}

					.radio-icon {
						margin-right: 14rpx;
					}

					&-content {
						margin-left: 25rpx;

						.item-title {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							line-height: 42rpx;
						}

						.item-data {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 38rpx;
							gap: 100rpx;
							margin: 25rpx 0 30rpx;
						}

						.item-price {
							font-weight: bold;
							font-size: 26rpx;
							color: #EB5C20;
							line-height: 34rpx;
						}
					}
				}

				&-tool {
					height: 110rpx;

					&-btn {
						text-align: center;
						width: 172rpx;
						height: 68rpx;
						line-height: 68rpx;
						background: #FFFFFF;
						border-radius: 34rpx;
						font-weight: 400;
						font-size: 28rpx;
					}

					.edit {
						color: #666666;
						border: 1px solid #EDEDED;
						margin-right: 21rpx;
					}

					.status {
						color: #333333;
						border: 1px solid #AAAAAA;
					}

					.normal {
						border: 1px solid #EB5C20;
						color: #EB5C20;
					}
				}

				.del-img {
					width: 30rpx;
					height: 30rpx;
				}

				&:last-child {
					margin-bottom: 0rpx;
				}
			}
		}
	}

	.wrap-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		overflow: hidden;
		z-index: 99;

		.edit-footer {
			width: 100%;
			background-color: white;
			overflow: hidden;
			border-top: 2rpx solid #eee;

			.edit-bottom {
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.left {
					gap: 20rpx;

					.choose {
						width: 40rpx;
						height: 40rpx;

						>image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						color: #666666;
					}
				}

				.right {
					gap: 25rpx;

					.btn {
						width: 180rpx;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						overflow: hidden;
						border-radius: 36rpx;
					}

					.delete-btn {
						background: $theme-gradit-color;
						color: white;
					}

					.down {
						border: 2rpx solid $theme-color;
						color: $theme-color;
					}
				}
			}
		}

		.manage-footer {
			width: 100%;
			background-color: #f6f6f6;
			overflow: hidden;

			.manage-bottom {
				width: 100%;
				padding: 25rpx;
				box-sizing: border-box;
				gap: 30rpx;

				>view {
					height: 92rpx;
					line-height: 92rpx;
					border-radius: 46rpx;
					text-align: center;
					overflow: hidden;
				}

				.manager-btn {
					width: 260rpx;
					background-color: #cccccc;
					color: #121212;
				}

				.add-btn {
					width: 410rpx;
					background: $theme-gradit-color;
					color: $bg-text-color;
				}
			}
		}
	}
</style>